<template>
    <div class="login-wrap">
        <div class="ms-title">SP2P 后台管理系统</div>
        <div class="ms-login">
            <form submit="false" class="login-form">
            	<div class="line">
            		<label><span>用户名：</span><input type="text" class="input" placeholder="请输入用户名" v-model="ruleForm.username"></label>
            	</div>
            	<div class="line">
            		<label><span>密&emsp;码：</span><input type="text" class="input" placeholder="请输入密码" v-model="ruleForm.password"></label>
            	</div>
            	<div class="line">
            		<label><span>验证码：</span><input type="text" class="input verify" placeholder="请输入验证码"><span class="btn btn-tint">获取验证码</span></label>
            	</div>
            	<div class="line center">
            		<span class="btn btn-tint btn-login" @click="login">登陆</span>
            	</div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
    	name: "login",
        data: function(){
            return {
                ruleForm: {
                    username: '',
                    password: ''
                },
            }
        },
        methods: {
            submitForm(formName) {
                const self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        localStorage.setItem('ms_username',self.ruleForm.username);
                        self.$router.push('/readme');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            login () {
            	var This = this;
            	if (This.ruleForm.username !== '' && This.ruleForm.password !== '') {
            		localStorage.setItem('ms_username',This.ruleForm.username);
            		This.$router.push('/readme');
            		return
            	}
            	
            	console.log('error submit!!')
            }
        }
    }
</script>

<style scoped lang="less">
	@import url("./../../assets/css/reset.css");
	@import url("./../../assets/css/variable.less");
	@import url("./../../assets/css/public.less");
    .login-wrap{
        position: relative;
        width:100%;
        height:100%;
        background: @main-dark-bg;
    }
    .ms-title{
        position: absolute;
        top:50%;
        width:100%;
        margin-top: -220px;
        text-align: center;
        font-size:30px;
        color: #fff;

    }
    .ms-login{
        position: absolute;
        left:50%;
        top:50%;
        width:388px;
        height:200px;
        margin:-120px 0 0 -226px;
        padding:40px;
        border-radius: 5px;
        background: #fff;
    }
    .btn{
    	height: 36px;
    	line-height: 36px;
        margin: 0;
    }
    .btn-login{
    	width: 120px;
    	margin-left: 70px;
    }
    .verify{
    	width: 180px;
    }
</style>